<template>
 <!-- :style="{paddingTop: $store.getters.updateBrowser ? '50px' : 0 }" -->
    <div id='app'>
        <div class="update-browser" v-show="$store.getters.updateBrowser">
            <p><i class="iconfont icon-tishi"></i>当前浏览器版本过低，建议升级，获得更佳的使用体验。</p>
            <div>
                <span>推荐使用&nbsp;谷歌浏览器&nbsp;</span>
                <a target="_blank" href="http://www.google.cn/intl/zh-CN/chrome/browser/">点击下载</a>

                <span>，&nbsp;火狐浏览器&nbsp;</span>
                <a target="_blank" href="http://www.firefox.com.cn/">点击下载</a>

                <span>，&nbsp;QQ浏览器&nbsp;</span>
                <a target="_blank" href="http://browser.qq.com/?adtag=SEM1">点击下载</a>

                <span>，&nbsp;搜狗浏览器&nbsp;</span>
                <a target="_blank" href="http://ie.sogou.com/">点击下载</a>

                <span>，&nbsp;360安全浏览器&nbsp;</span>
                <a target="_blank" href="http://se.360.cn/">点击下载</a>

                <span>，&nbsp;360急速浏览器&nbsp;</span>
                <a target="_blank" href="http://chrome.360.cn/">点击下载</a>

                <span>，&nbsp;欧朋浏览器&nbsp;</span>
                <a target="_blank" href="http://www.oupeng.com/download/">点击下载</a>
            </div>
            <div class="close" @click="closeUpdateBrowser"><Icon type="close-round"></Icon></div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: 'App',
        created(){
            this.init()
        },
        methods: {
            init(){ //检测是否提示更新浏览器
                if(this.$utils.Storage.getObj('browser')){
                    this.$store.commit('updateBrowser', this.$utils.Storage.getObj('browser'));
                }
            },
            closeUpdateBrowser(){   //关闭提示窗
                this.$store.commit('updateBrowser', false);
                this.$utils.Storage.remove('browser')
            }
        }
    }
</script>

<style lang="less">
    #app{
        min-width: @min-width;
        .update-browser{
            padding: 5px 10px 10px;
            position: fixed;
            top: 0;
            left: 1%;
            z-index: 10000;
            margin: 5px 0;
            border-radius: 3px;
            background: #f9f6e4;
            width: 98%;
            border: 1px solid #ece19c;
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
            p{
                i{
                    margin-right: 10px;
                    color: #f3bc67;
                }
            }
            div{
                padding-left: 25px;
            }
            .close{
                position: absolute;
                top: 5px;
                right: 10px;
                // width: 20px;
                // height: 20px;
                color: #aaa;
                text-align: center;
                cursor: pointer;
                &:hover{
                    i{
                        color: #666;
                    }
                }
            }
        }
        
        .to-top{
            position: absolute;
            right: 40px;
            bottom: 30px;
            font-size: 16px;
            width: 30px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 3px;
            background: rgba(51, 55, 67, 0.9);
            transition: all 0.1s linear;
            cursor: pointer;
            &:hover{
                background: @hover-color;
            }
        }
    }
</style>

